<template>
    <div id="v-waterfall-content">
        <div id="picture">
            <a-image-preview-group>
                <div class="photo_item" v-for="(item, index) in photoList" :key="index">
                    <!-- <img :src="item.url" alt=""> -->

<!--                        <img v-lazy="item.url" />-->
                        <a-image :src="item.url" />

                </div>
            </a-image-preview-group>

        </div>
    </div>

</template>

<script>
    import { defineComponent, onMounted, reactive, ref, watch, components } from 'vue';
    import { message } from 'ant-design-vue';


    const photoList = ref([]);

    for(var i = 1; i < 27; i ++){
        photoList.value.push(
            { url: 'http://112.74.55.150:8081/web/img/picture/b'+i+'.jpg'}
        )
    }


    export default defineComponent({


        setup (){

            return {
                photoList

            }
        }
    })

</script>

<style lang="scss">
#v-waterfall-content{
    width: 100%;
    height: 100%;
    position: relative;

    #picture{
            position: relative;
            background-image: url();
            background-repeat: repeat;
        .photo_item{
                display: inline-block;
                padding: 10px;
                img{
                        display: inline-block;
                        height: 150px;
                }
            }
    }
}

</style>
